@extends('develop.layoutEdit')

@section('title')

    <li class="cur">
        <span>配送时间设置</span>
    </li>

@endsection


@section('css')
    <link rel="stylesheet" type="text/css" href="/framework/jquery/jquery-ui.css" />
    <style>
        .layer-go-back{
            display:none;
        }
        .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
        .ui-timepicker-div dl { text-align: left; }
        .ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
        .ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
        .ui-timepicker-div td { font-size: 90%; }
        .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

        .ui-timepicker-rtl{ direction: rtl; }
        .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
        .ui-timepicker-rtl dl dt{ float: right; clear: right; }
        .ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }
    </style>
@endsection

@section('content')

    <div class="form-group">
        <label class="col-sm-3 control-label"><span class="red pr5">*&nbsp;</span>配送时间方式：</label>
        <div class="col-sm-9">
            <div class="layui-form">
                @if( $configure['send_time_type'] && $configure['send_time_type'] == 1 )
                <input type="radio" class="square-radio" style="margin-right:3px;" name="send_time_type" lay-filter="check" title="方式一" value="1" checked>
                @else
                <input type="radio" class="square-radio" style="margin-right:3px;" name="send_time_type" lay-filter="check" title="方式一" value="1" checked>
                @endif
                @if( $configure['send_time_type'] && $configure['send_time_type'] == 2 )
                <input type="radio" class="square-radio" style="margin-right:3px;" name="send_time_type" lay-filter="no_check" title="方式二" value="2" checked>
                @else
                <input type="radio" class="square-radio" style="margin-right:3px;" name="send_time_type" lay-filter="no_check" title="方式二" value="2">
                @endif
            </div>
        </div>
    </div>

    <!--配送时间-->
    <div id="send_time_data" @if( $configure['send_time_type'] == 2 )style="display: none;"@endif >
        <div class="panel panel-default" style="margin-left: 155px; width: 650px;">

            <div class="panel-heading"  >配送时间</div>
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th width="75%" style="text-align:center;">配送时间</th>
                    <th width="25%" style="text-align:center;">操作</th>
                </tr>
                </thead>
                <tbody id="bill-time">

                </tbody>
            </table>
        </div>
        <button type="button" class="btn btn-primary" onclick="func.billTime();" style="margin-left: 155px;">添加配送时间</button>
    </div>

    <!--配送时间段-->
    <div id="send_time_slot_data" @if( $configure['send_time_type'] == 1 )style="display: none;"@endif >
        <div class="panel panel-default" style="margin-left: 155px; width: 650px;">
            <div class="panel-heading">配送时间列表</div>
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th style="text-align:center;">配送开始时间</th>
                    <th style="text-align:center;">配送结束时间</th>
                    <th style="text-align:center;">下单截止时间</th>
                    <th style="text-align:center;">操作</th>
                </tr>
                </thead>
                <tbody id="bill-pick">

                </tbody>
            </table>
        </div>
        <button type="button" class="btn btn-primary" onclick="func.billTime();" style="margin-top: 5px;margin-left: 155px;">添加时间段</button>
        <div style="margin-top: 10px;margin-left: 155px;">
            <span style="margin-right: 20px">配送日期可选<input class="form-control" style="width: 50px; display: inline-block; margin: 0 20px; text-align: center;" type="text" id="send_date" name="send_date" maxlength="20"  value="2" />天</span>
            <span class="help-block" style="display: inline-block;">默认1是代表客户只能选择当天的时间段，如果设置了2代表客户可选择今天和明天的时间段</span>
        </div>
    </div>

    <div class="form-group">
        <input type="hidden" name="function_id" id="function_id" value="{{ $function_id or ''}}">
        <input type="hidden" name="timeID_flg" id="timeID_flg" value="">
        <input type="button"  value="保存" onclick="func.edit();" class="btn btn-success" style="margin-top: 20px;margin-left: 155px;">
    </div>

@endsection

@section('js')
    <script src="/framework/jquery/jquery-ui.min.js"></script>
    <script src="/framework/jquery/jquery-ui-timepicker-addon.js"></script>
    <script>

        var send_time_type = {{ $configure['send_time_type'] }};

        layui.use(['form'], function(){
            var form = layui.form();

            form.on('radio(check)', function(data){
                send_time_type = data.value;
                if ( this.checked ) {
                    $("#send_time_data").show();
                    $("#send_time_slot_data").hide();
                }
            });
            form.on('radio(no_check)', function(data){
                send_time_type = data.value;
                if ( this.checked ) {
                    $("#send_time_data").hide();
                    $("#send_time_slot_data").show();
                }
            });
        });

        var configure_json = 0 ;
        if ( !E.isEmpty({!! $configure_json or 0 !!}) ) {
            configure_json = eval( '(' + '{!! $configure_json or 0 !!}'  + ')' );
        }


        var func = {

            timeID : 1,         //配送时间ID

            detail: [],        //配送时间数组信息

            detail_solt: [],   //配送时间段数组信息

            //配送时间\配送时间段 弹出层
            billTime: function (timeID) {

                if (send_time_type == 1) {  //配送方式一
                    var name = '';
                    if (timeID) {
                        name = '修改配送时间';
                    } else {
                        name = '添加配送时间';
                    }

                    var html = '';
                    html += '<div id="pop_time">';
                    html += '<form id="group-form" onsubmit="return false;" class="form-horizontal" role="form" style="margin-top: 10px;">';
                    html += '<div class="form-group">';
                    html += '<label class="col-sm-3 control-label" for="timeName"><span class="red mr5">*</span>配送时间：</label>';
                    html += '<div class="col-sm-5">';
                    html += '<input class="form-control" type="text" id="timeName" style="width:240px;" name="timeName" maxlength="20" placeholder="请输入配送时间"  value="" />';
                    html += '</div>';
                    html += '</div>';
                    html += '</form>';
                    html += '</div>';

                    layer_index = layer.open({
                        type: 1,
                        area: ['470px', 'auto'],
                        offset: '50px',
                        shadeClose: true, //点击遮罩关闭
                        title: name,
                        content: html,
                        btn: ['保存', '取消'],
                        yes: function (index) {
                            if (timeID) {
                                func.timeEdit(timeID);
                            } else {
                                func.timeAdd();
                            }

                        }
                    });
                    if (timeID) {
                        $('#timeName').val($('#name_' + timeID).text());
                    }

                } else {            //配送方式二

                    var solt_html = '';
                    solt_html += '<div id="pop_time_solt">';
                    solt_html += '<form id="group-form" onsubmit="return false;" class="form-horizontal" role="form" style="margin-top: 10px;">';
                    solt_html += '<div class="form-group">';
                    solt_html += '<label class="col-sm-4 control-label" for="send_start_time"><span class="red mr5">*</span>配送开始时间：</label>';
                    solt_html += '<div class="col-sm-5">';
                    solt_html += '<input class="form-control" readonly type="text" id="send_start_time" name="send_start_time" maxlength="20" placeholder="请输入配送开始时间"  value="" />';
                    solt_html += '</div>';
                    solt_html += '</div>';
                    solt_html += '<div class="form-group">';
                    solt_html += '<label class="col-sm-4 control-label" for="send_end_time"><span class="red mr5">*</span>配送结束时间：</label>';
                    solt_html += '<div class="col-sm-5">';
                    solt_html += '<input class="form-control" readonly type="text" id="send_end_time" name="send_end_time" maxlength="20" placeholder="请输入配送结束时间"  value="" />';
                    solt_html += '</div>';
                    solt_html += '</div>';
                    solt_html += '<div class="form-group">';
                    solt_html += '<label class="col-sm-4 control-label" for="order_dead_time"><span class="red mr5">*</span>下单截止时间：</label>';
                    solt_html += '<div class="col-sm-5">';
                    solt_html += '<input class="form-control" readonly type="text" id="order_dead_time" name="order_dead_time" maxlength="20" placeholder="请输入下单截止时间"  value="" />';
                    solt_html += '</div>';
                    solt_html += '</div>';
                    solt_html += '</form>';
                    solt_html += '</div>';

                    var name = '';
                    if (timeID) {
                        name = '修改配送时间段';

                    } else {
                        name = '添加配送时间段';
                    }

                    layer_index = layer.open({
                        type: 1,
                        area: ['460px', 'auto'],
                        offset: '50px',
                        shadeClose: true, //点击遮罩关闭
                        title: name,
                        content: solt_html,
                        btn: ['保存', '取消'],
                        yes: function (index) {
                            if (timeID) {
                                func.timeEdit(timeID);
                            } else {
                                func.timeAdd();
                            }

                        }
                    });
                    if (timeID) {
                        $('#send_start_time').val($('#star_solt_' + timeID).text());
                        $('#send_end_time').val($('#end_solt_' + timeID).text());
                        $('#order_dead_time').val($('#order_solt_' + timeID).text());
                    }
                    $("#send_start_time,#send_end_time,#order_dead_time").timepicker({timeFormat:'HH:mm:ss',showHour: true,showMinute: true,showSecond: true,});
                }

            },

            //添加\修改 配送时间
            timeAdd: function () {
                var time_data = {};

                if (send_time_type == 1) {        //配送方式一
                    var timeName = $('#timeName').val();
                    if (E.isEmpty(timeName)) {
                        layer.alert('配送时间不能为空', {icon: 2});
                        return false;
                    }
                    var html = '';
                    html += '<tr class="time_' + func.timeID + '" flg="' + func.timeID + '">';
                    html += '<td style="text-align:left;" id="name_' + func.timeID + '">' + timeName + '</td>';
                    html += '<td style="text-align:center;">';
                    html += '<a href="javascript:void(0);" onclick="func.billTime(' + func.timeID + ');">修改</a>&nbsp;&nbsp;';
                    html += '<a href="javascript:void(0);" onclick="func.del(' + func.timeID + ');">删除</a> ';
                    html += '</td>';
                    html += ' </tr>';
                    $('#bill-time').append(html);

                    time_data.timeID = func.timeID;
                    time_data.timeName = timeName;
                    func.detail.push(time_data);

                    $('#timeID_flg').val(func.timeID);

                    $('input[name="timeName"]').val('');

                } else {            //配送方式二

                    var send_start_time = $('#send_start_time').val();
                    var send_end_time = $('#send_end_time').val();
                    var order_dead_time = $('#order_dead_time').val();
                    var msg = '';
                    if (E.isEmpty(send_start_time)) {
                        msg += '配送开始时间不能为空<br>';
                    }
                    if (E.isEmpty(send_end_time)) {
                        msg += '配送结束时间不能为空<br>';
                    }
                    if (E.isEmpty(order_dead_time)) {
                        msg += '配送下单截止时间不能为空<br>';
                    }
                    if (order_dead_time > send_end_time) {
                        msg += '下单截止时间不能大于配送开始时间<br>';
                    }

                    if (send_end_time < send_start_time) {
                        msg += '配送结束时间不能大于配送开始时间<br>';
                    }
                    if (!E.empty(msg)) {
                        layer.alert(msg, {icon: 2});
                        return false;
                    }

                    var html = '';
                    html += '<tr class="time_solt_' + func.timeID + '" flg="' + func.timeID + '">';
                    html += '<td style="text-align:center;" id="star_solt_' + func.timeID + '">' + send_start_time + '</td>';
                    html += '<td style="text-align:center;" id="end_solt_' + func.timeID + '">' + send_end_time + '</td>';
                    html += '<td style="text-align:center;" id="order_solt_' + func.timeID + '">' + order_dead_time + '</td>';
                    html += '<td style="text-align:center;">';
                    html += '<a href="javascript:void(0);" onclick="func.billTime(' + func.timeID + ');">修改</a>&nbsp;&nbsp;';
                    html += '<a href="javascript:void(0);" onclick="func.del(' + func.timeID + ');">删除</a> ';
                    html += '</td>';
                    html += ' </tr>';
                    $('#bill-pick').append(html);

                    time_data.timeID = func.timeID;
                    time_data.send_start_time = send_start_time;
                    time_data.send_end_time = send_end_time;
                    time_data.order_dead_time = order_dead_time;
                    func.detail_solt.push(time_data);

                    $('#timeID_flg').val(func.timeID);
                    $('input[name="send_start_time"]').val('');
                    $('input[name="send_end_time"]').val('');
                    $('input[name="order_dead_time"]').val('');

                }
                func.timeID++;
                layer.close(layer_index);
            },

            //修改
            timeEdit: function (timeID) {
                if (send_time_type == 1) {        //配送方式一
                    var timeName = $('#timeName').val();
                    $('#name_' + timeID).text(timeName);
                    $.each(func.detail, function (k, v) {
                        if (v.timeID == timeID) {
                            v.timeName = timeName;
                        }
                    });
                    $('input[name="timeName"]').val('');

                } else {                    //配送方式二

                    var send_start_time = $('#send_start_time').val();
                    var send_end_time = $('#send_end_time').val();
                    var order_dead_time = $('#order_dead_time').val();
                    $('#star_solt_' + timeID).text(send_start_time);
                    $('#end_solt_' + timeID).text(send_end_time);
                    $('#order_solt_' + timeID).text(order_dead_time);

                    $.each(func.detail_solt, function (k, v) {
                        if (v.timeID == timeID) {
                            v.send_start_time = send_start_time;
                            v.send_end_time = send_end_time;
                            v.order_dead_time = order_dead_time;
                        }
                    });
                    $('input[name="send_start_time"]').val('');
                    $('input[name="send_end_time"]').val('');
                    $('input[name="order_dead_time"]').val('');
                }

                layer.close(layer_index);
            },

            //删除
            del: function (timeID) {            //配送方式一
                if (send_time_type == 1) {
                    $('.time_' + timeID).remove();
                    if (!E.empty(func.detail)) {
                        $.each(func.detail, function (k, v) {
                            if (timeID == v.timeID) {
                                func.detail.splice(k, 1);
                                return false;
                            }
                        });
                    }

                } else {                    //配送方式二

                    $('.time_solt_' + timeID).remove();
                    if (!E.empty(func.detail_solt)) {
                        $.each(func.detail_solt, function (k, v) {
                            if (timeID == v.timeID) {
                                func.detail_solt.splice(k, 1);
                                return false;
                            }
                        });
                    }
                }

            },

            //配送时间\配送时间段信息
            sendConten: function () {

                if ( configure_json['configure'] ) {

                    if ( configure_json['configure']['send_time_type'] == 1) {         //配送方式一

                        $('#send_time_data').show();
                        $('#send_time_slot_data').hide();

                        var htmlTime = '';
                        if ( configure_json['configure']['detail'] ) {
                            $.each( configure_json['configure']['detail'], function (k, v) {
                                htmlTime += '<tr class="time_' + v.timeID + '" flg="' + v.timeID + '">';
                                htmlTime += '<td style="text-align:left;" id="name_' + v.timeID + '">' + v.timeName + '</td>';
                                htmlTime += '<td style="text-align:center;">';
                                htmlTime += '<a href="javascript:void(0);" onclick="func.billTime(' + v.timeID + ');">修改</a>&nbsp;&nbsp;';
                                htmlTime += '<a href="javascript:void(0);" onclick="func.del(' + v.timeID + ');">删除</a> ';
                                htmlTime += '</td>';
                                htmlTime += ' </tr>';

                                var time_data = {};
                                time_data.timeID = v.timeID;
                                time_data.timeName = v.timeName;
                                func.detail.push(time_data);
                            });
                        } else {
                            configure_json['configure']['timeID_flg'] == 1 ;
                        }
                        $('#bill-time').html(htmlTime);

                    } else {                                //配送方式二

                        $('#send_time_data').hide();
                        $('#send_time_slot_data').show();

                        var html = '';
                        if ( configure_json['configure']['detail'] ) {
                            $.each( configure_json['configure']['detail'], function (k, v) {
                                html += '<tr class="time_solt_' + v.timeID + '" flg="' + v.timeID + '">';
                                html += '<td style="text-align:center;" id="star_solt_' + v.timeID + '">' + v.send_start_time + '</td>';
                                html += '<td style="text-align:center;" id="end_solt_' + v.timeID + '">' + v.send_end_time + '</td>';
                                html += '<td style="text-align:center;" id="order_solt_' + v.timeID + '">' + v.order_dead_time + '</td>';
                                html += '<td style="text-align:center;">';
                                html += '<a href="javascript:void(0);" onclick="func.billTime(' + v.timeID + ');">修改</a>&nbsp;&nbsp;';
                                html += '<a href="javascript:void(0);" onclick="func.del(' + v.timeID + ');">删除</a> ';
                                html += '</td>';
                                html += ' </tr>';

                                var time_data = {};
                                time_data.timeID = v.timeID;
                                time_data.send_start_time = v.send_start_time;
                                time_data.send_end_time = v.send_end_time;
                                time_data.order_dead_time = v.order_dead_time;
                                func.detail_solt.push(time_data);

                            });
                        } else {
                            configure_json['configure']['timeID_flg'] == 1 ;
                        }
                        $('#bill-pick').html(html);

                        $('#send_date').val(configure_json['configure']['send_date']);

                    }

                    $('#timeID_flg').val( configure_json['configure']['timeID_flg'] );
                    func.timeID = parseFloat( configure_json['configure']['timeID_flg'] ) + 1;

                }
            },

            //保存
            edit:function () {

                //表单数据
                var dt = E.getFormValues("edit-form");
                var configure = {};
                var send_time_type = dt.send_time_type;
                var function_id = dt.function_id;
                configure.send_time_type = send_time_type;
                configure.function_id = function_id;
                configure.timeID_flg = $('#timeID_flg').val();
                var msg = '';

                //参数判断
                if( E.isEmpty( configure.function_id ) || !E.isInt( configure.function_id ) ) {
                    msg += '参数错误<br/>' ;
                }
                if (send_time_type == 1) {

                    func.detail_solt = [];
                    configure.detail = func.detail;

                } else {

                    func.detail = [];
                    configure.send_date = $('#send_date').val();
                    configure.detail = func.detail_solt;

                    if (E.isEmpty(configure.send_date) || configure.send_date <= 0) {
                        msg += '配送日期不能为空且要大于0<br>';
                    }
                }

                if (msg) {
                    layer.alert(msg, {icon: 2});
                    return false;
                }

                layer.confirm('您确认保存配送时间设置吗？', {icon: 3}, function ( index ) {
                    layer.close( index );
                    E.ajax({
                        type:'get',
                        url: '/lar/develop/function/store/'+function_id,
                        dataType:'json',
                        data: configure,
                        // 返回值判断
                        success: function ( obj ){

                            if ( obj.code == 200 ) {
                                layer.alert( obj.message , { icon: 1,time : 1500 } ) ;
                            } else {
                                layer.alert( obj.message , { icon: 2 } ) ;
                            }
                        }
                    });
                });

            }

        };

        func.sendConten();

    </script>
@endsection